/*
 * Copyright (c) 2007-2020 西安交通信息投资营运有限公司 版权所有
 * 作者:焦元义
 */

import React, {FC, useCallback, useMemo, useRef} from 'react';
import {ProColumns} from '@ant-design/pro-table';
import {Button,} from 'antd';
import service from './service';
import {SysDicCategoryModel} from './data';
import Details from './components/Details';
import Edit from './components/Edit';
import ProTableCrud, {ProTableCrudOperate} from '@/components/ProTableCrud';
import useList, {ListOperate} from '@/hooks/useList';
import useDelete from '@/hooks/useDelete';
import XtraModal, {XtraModalMethods} from "@/lib/XtraModal";
import XtraTree from "@/lib/XtraTree";
import {hasPermission} from "@/utils/utils";
import config from "@/config";
import Permission from "@/components/Permission";
import useDialog from "@/hooks/useDialog";

/** 系统字典类型模块 */
const SysDicCategoryPage: FC = () => {
  const dragModal = useRef<XtraModalMethods>(null);
  const editOperate = useDialog();
  const detailsOperate = useDialog();


  //List
  const listOperate = useList<SysDicCategoryModel>({
    onLoad: (params) => service.selectTreeList(params),
    onExport: (params) => service.export(params),
  });


  //Delete
  const deleteOperate = useDelete<SysDicCategoryModel>({
    onDelete: (ids, _) => service.delete(ids.join()),
    onDeleteSucess: listOperate.handleReload,
  });

  //模块拖拽窗口[确定]按钮回调函数
  const onDragModalOk = useCallback(() => {
    dragModal.current?.hide();
    listOperate.handleReload();
  }, []);

  //表格列
 const cols = useMemo(() => getCols(listOperate), []);

  //增删改查选项
  const tableOperate: ProTableCrudOperate<SysDicCategoryModel> = {
    cols,
    showDetails: hasPermission(config.permission.sysDicCategory.select),
    showCreate: hasPermission(config.permission.sysDicCategory.insert),
    showEdit: hasPermission(config.permission.sysDicCategory.update),
    showDelete: hasPermission(config.permission.sysDicCategory.delete),
    showExport: hasPermission(config.permission.sysDicCategory.export),
    listOperate,
    editOperate,
    deleteOperate,
    detailsOperate,
    optionColumnPosition: 2,
    getToolbarItems: (_, rows) => ['create', 'edit', 'delete', (hasPermission(config.permission.sysDicCategory.update)?<Button onClick={() => {
      // setDragVisable(v=>!v);
      dragModal.current?.show();
    }}>
      <i className="fal fa-chart-network"/>
      拖拽
    </Button>:null), 'export'],
    getEditElement: (props) => (<Edit {...props}/>),
    getDetailsElement: (props) => (<Details {...props}/>),
  };

  return (
    <>
      <Permission code={config.permission.sysDicCategory.select}>
        <ProTableCrud pagination={false} scroll={{x:1000}} headerTitle="系统字典类型列表" rowKey="id" operate={tableOperate}/>
      </Permission>

      <XtraModal ref={dragModal} title="字典类型拖拽" onOk={onDragModalOk} cancelButtonVisible={false}>
        <XtraTree onLoadTreeData={service.selectTreeList} onSaveDndNodes={service.updateDnd}/>
      </XtraModal>
    </>
  );
};
/** 获取表格列 */
function getCols(listOperate: ListOperate<SysDicCategoryModel>): (ProColumns<SysDicCategoryModel>[]) {
  return [
    {
      title: '字典类型名称',
      dataIndex: 'name',
      hideInTable: false,
      hideInSearch: false,
      ellipsis: false,
      sorter: false,
      width: '220px',
      filters: undefined,
      align: 'center',
      formItemProps: {
        'placeholder': '请输入字典类型名称',
      },
      //renderFormItem: (item, {type, defaultRender, ...rest}) => {
      //  return (<Input {...rest} placeholder="请输入字典类型名称"/>)
      //},
    },
    {
      title: '字典类型编码',
      dataIndex: 'code',
      hideInTable: false,
      hideInSearch: false,
      ellipsis: false,
      sorter: false,
      width: '220px',
      filters: undefined,
      align: 'center',
      formItemProps: {
        'placeholder': '请输入字典类型编码',
      },
      //renderFormItem: (item, {type, defaultRender, ...rest}) => {
      //  return (<Input {...rest} placeholder="请输入字典类型编码"/>)
      //},
    },
    {
      title: '序号',
      dataIndex: 'path',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      width: '60px',
      align: 'center',
      formItemProps: {
        'placeholder': '请输入序号',
      },
      //renderFormItem: (item, {type, defaultRender, ...rest}) => {
      //  return (<Input {...rest} placeholder="请输入序号"/>)
      //},
    },
    {
      title: '备注',
      dataIndex: 'remark',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: true,
      sorter: false,
      filters: undefined,
      align: 'center',
      formItemProps: {
        'placeholder': '请输入备注',
      },
      //renderFormItem: (item, {type, defaultRender, ...rest}) => {
      //  return (<Input {...rest} placeholder="请输入备注"/>)
      //},
    },
  ]
}

export default SysDicCategoryPage;

